<div class="page">
    <h1>自定义表单元素扩展规则</h1>
    <div class="line"></div>
    <h3>Form 表单自定义扩展</h3>
    <br>
    <div class="line"></div>
    <h3>建立自定义表单元素对象</h3>
    <pre class="line-numbers"><code class="language-js">var customForm = function (options){
    // options : 创建表单元素时的参数
    // 此处执行自定义表单逻辑

    // 必须的对象值 ：html；
    // 此对象控制表单元素的具体显示对象
    // 也是表单元素实例化后的 dom 元素对象
    this.html = $('&lt;div&gt;&lt;/div&gt;')
};
// 扩展原型链 设定赋值方法( set 关键字为必须存在的选项 )
customForm.prototype.set = function (data) { 
    // 此处为自定义表单赋值
    // do someThing
};
// 扩展原型链 设定取值方法( get 关键字为必须存在的选项 )
customForm.prototype.get = function (callback,ignore) { 
    // callback 为回调函数
    callback(emsg,value);
    // callback 返回值 emsg , 接收错误信息，类型：字符串
    // 当 !!emsg 为 true 时，则进行错误信息处理
    // value 自定表单元素返回值

    // ignore 参数为忽略验证进行取值操作，
    // 一般不在自定义表单对象中进行处理
};

// 将此组件引入到form表单对象时，form表单会认为它是一个表单元素对象
export default customForm;
</code></pre>
    <div class="line"></div>
    <h3>在表单对象中加入自定义表单元素</h3>
    <pre class="line-numbers"><code class="language-js">// 以上省略，参见from 表单对象
...
_form.$setOptions([{
    // 表单元素其他属性可根据自定义自行设置
    key: 'string',

    // 此处注意，type 对象必须为空，此时才能告诉form对象，这是一个自定义表单元素

    // 实例化后元素位置，交由表单统一进行处理
    el: this.$el.find('#string'),

    // 引入自定义表单元素
    object : customForm,
}]);

// customForm 接到的参数
// options = {
//     key: 'string',
//     el: this.$el.find('#string'),
//     object : customForm,
// } 
...
// 以下省略，参见from 表单对象
</code></pre>





</div>